<template>
        <div class="my">

            <!-- 头部 -->
            <div class="header">
                <!-- 头像 -->
                 <div class="header-portrait">
                        <img src="https://s1.ax1x.com/2022/10/12/xUifds.png" alt="">
                 </div>
            </div>
            <!-- 页面信息 -->
            <div class="section">
                <ul>
                    <li><p>姓名<span class="infor">张薇</span></p></li>
                    <li><p>手机<span class="infor">18665425489</span></p></li>
                    <li><p>医院<span class="infor">上海市医院</span></p></li>
                    <li><p>科室<span class="infor">小儿科</span></p></li>
                    <li><p>职称<span class="infor">主任医师</span></p></li>
                </ul>
            </div>
            <Footers></Footers>
        </div>
</template>

<script>
import Footers from '@/components/Footers/Footers.vue'
export default {
    name:'my',
    components:{
    Footers,
  },
    data() {
        return {
            
        }
    },
}
</script>

<style lang="less" scoped>
 .header{
        height: 13.75rem;
        background: #199ed8;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
}
.section{
    width: 100%;
}
.section ul li {
   height: 2.1875rem;
   border-bottom: .125rem  solid #cccccc;
}
.section ul li p{
    margin: .9375rem 0 0 1.25rem;
    font-weight: 100;
    color: #333333;
}
.section ul li p span{
    color: #999999;
    margin-right: 1.25rem;
}
.infor{
    float:right;
}
.header-portrait{
    width: 6.25rem;
    height: 6.25rem;
    background: #fff;
    border-radius: 50%;
    
}
.header-portrait img{
    width: 4.1875rem;
    height: 4.3125rem;
    margin: 1.125rem;
}
</style>